<template>
  <!-- <aside>
    <router-link to="/control/home">管理首页</router-link> -
    <router-link to="/control/admin">用户管理</router-link> -
    <router-link to="/login">安全退出</router-link>
  </aside>
  <router-view></router-view> -->
  <div class="backimg">
    <el-container style="height:100vh">
      <el-aside width="auto">

        <RouterLink to="/control" class="logo">
          <el-icon :size="30" color="rgb(254, 223, 225,1)">
            <Dessert />
          </el-icon>
          <span v-if="!isCollapse">Rakuna</span>

        </RouterLink>

        <el-scrollbar style="height: calc(100vh - 60px);">

          <el-menu :default-active="$route.path" :collapse="isCollapse" class="my-menu" router>

            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Monitor />
                </el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/control/home">数据分析</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <User />
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/control/admin">用户列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <Box />
                </el-icon>
                <span>产品管理</span>
              </template>
              <el-menu-item index="/control/category">类别列表</el-menu-item>
              <el-menu-item index="/control/product">产品列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <Lock />
                </el-icon>
                <span>会员管理</span>
              </template>
              <el-menu-item index="/control/user">会员列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <SoldOut />
                </el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/control/orderform">订单列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <Picture />
                </el-icon>
                <span>轮播管理</span>
              </template>
              <el-menu-item index="/control/slide">首页轮播列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <Document />
                </el-icon>
                <span>文章管理</span>
              </template>
              <el-menu-item index="/control/article">底部导航列表</el-menu-item>
            </el-sub-menu>
          </el-menu>


        </el-scrollbar>

      </el-aside>
      <el-container>

        <el-header>
          <el-form inline size="default">
            <el-form-item>
              <el-button :icon="Fold" @click="isCollapse = !isCollapse" />
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入搜索内容" v-model.trim="keyword" :suffix-icon="Search"></el-input>
            </el-form-item>
          </el-form>

          <div class="right-menu">
            <el-menu :ellipsis="false" router mode="horizontal" default-active="/control/admin"
              background-color="rgb(254, 223, 225,0)">
              <el-menu-item index="/control/admin">
                管理首页
              </el-menu-item>

              <el-menu-item index="/control/help">
                帮助文档
              </el-menu-item>

              <el-menu-item style="height: 100%;">
                <el-dropdown>
                  <div style="line-height: 60px; outline: none;">
                    <el-badge :value="countUnreaded" :offset="[4, 15]" :show-zero="false">
                      系统通知
                    </el-badge>
                  </div>
                  <template #dropdown>
                    <el-tabs v-model="noticeType" class="my-tabs" stretch>


                      <el-tab-pane :label="`消息(${filterNotice('msg').length})`" name="msg">
                        <p v-if="filterNotice('msg').length === 0" class="nodata">暂无消息</p>

                        <template v-else>
                          <el-scrollbar height="200px">
                            <div class="notice-list">
                              <div :class="['notice-list-item', { readed: item.readed }]"
                                v-for="item in filterNotice('msg')" :key="item.id">
                                <el-avatar :size="36" :src="item.avatar" />
                                <p>
                                  <b>{{ item.name }}</b>的通知<br>
                                  {{ item.content }}<br>
                                  <small>{{ item.createTime }}</small>
                                </p>
                              </div>
                            </div>
                          </el-scrollbar>
                          <el-row justify="space-around" align="middle" style="margin-top: 20px;">
                            <el-button type="primary" link @click="setAllRead('msg')">全部已读</el-button>
                            <el-divider direction="vertical" />
                            <el-link type="primary" href="#/control/notice">查看更多</el-link>
                            <el-divider direction="vertical" />
                            <el-button type="primary" link @click="clearNotice('msg')">清空消息</el-button>
                          </el-row>

                        </template>
                      </el-tab-pane>


                      <el-tab-pane :label="`通知(${filterNotice('notice').length})`" name="notice">
                        <p v-if="filterNotice('notice').length === 0" class="nodata">暂无通知信息</p>

                        <template v-else>
                          <el-scrollbar height="200px">
                            <div class="notice-list">
                              <div :class="['notice-list-item', { readed: item.readed }]"
                                v-for="item in filterNotice('notice')" :key="item.id">
                                <el-avatar :size="36" :src="item.avatar" />
                                <p>
                                  <b>{{ item.name }}</b>的通知<br>
                                  {{ item.content }}<br>
                                  <small>{{ item.createTime }}</small>
                                </p>
                              </div>
                            </div>
                          </el-scrollbar>
                          <el-row justify="space-around" align="middle" style="margin-top: 20px;">
                            <el-button type="primary" link @click="setAllRead('notice')">全部已读</el-button>
                            <el-divider direction="vertical" />
                            <el-link type="primary" href="#/control/notice">查看更多</el-link>
                            <el-divider direction="vertical" />
                            <el-button type="primary" link @click="clearNotice('notice')">清空消息</el-button>
                          </el-row>
                        </template>
                      </el-tab-pane>


                      <el-tab-pane :label="`代办(${filterNotice('todo').length})`" name="todo">
                        <p v-if="filterNotice('todo').length === 0" class="nodata">暂无代办信息</p>

                        <template v-else>
                          <el-scrollbar height="200px">
                            <div class="notice-list">
                              <div :class="['notice-list-item', { readed: item.readed }]"
                                v-for="item in filterNotice('todo')" :key="item.id">
                                <el-avatar :size="36" :src="item.avatar" />
                                <p>
                                  <b>{{ item.name }}</b>的通知<br>
                                  {{ item.content }}<br>
                                  <small>{{ item.createTime }}</small>
                                </p>
                              </div>
                            </div>
                          </el-scrollbar>
                          <el-row justify="space-around" align="middle" style="margin-top: 20px;">
                            <el-button type="primary" link @click="setAllRead('todo')">全部已读</el-button>
                            <el-divider direction="vertical" />
                            <el-link type="primary" href="#/control/notice">查看更多</el-link>
                            <el-divider direction="vertical" />
                            <el-button type="primary" link @click="clearNotice('todo')">清空消息</el-button>
                          </el-row>
                        </template>
                      </el-tab-pane>
                    </el-tabs>
                  </template>
                </el-dropdown>
              </el-menu-item>
            </el-menu>

            <el-dropdown trigger="click" @command="onCommand">
              <p class="el-dropdown-link">
                <el-avatar :size="34" :src="$baseAdminUrl + adminStore.adminInfo.avatar" />
                <span>{{ adminStore.adminInfo.nickName }}</span>
                <el-icon class="el-icon--right">
                  <ArrowDown />
                </el-icon>
              </p>
              <template #dropdown>
                <el-dropdown-menu style="width: 120px;">
                  <el-dropdown-item :icon="User" command="/control/adminprofile">个人信息</el-dropdown-item>
                  <el-dropdown-item :icon="Setting" command="/control/setting">系统设置</el-dropdown-item>
                  <el-dropdown-item :icon="Bell" command="/control/notice">系统通知</el-dropdown-item>
                  <el-dropdown-item :icon="Lock" command="/control/editpassword">修改密码</el-dropdown-item>
                  <el-dropdown-item :icon="SwitchButton" divider command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

          <!-- 头部结尾 -->
        </el-header>

        <el-scrollbar style="height: calc(100vh - 60px);">
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-scrollbar>

      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { Fold, Expand, Search, Lock, User, Setting, Bell, SwitchButton, ArrowDown, Monitor, Picture, Box, SoldOut, Document, Dessert } from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
import { useAdminStore } from '@/stores/admin'
import { ElMessageBox } from 'element-plus'
import router from '@/router'
import { fi } from 'element-plus/es/locales.mjs'


const isCollapse = ref(false)

const keyword = ref('')

const adminStore = useAdminStore()
adminStore.setAdminInfo()

const onCommand = async (command: string) => {
  if (command === 'logout') {
    try {
      const res = await ElMessageBox.confirm('您确定要退出当前登陆吗？', '提示', { type: 'warning' });
      if (res) {
        localStorage.removeItem('gx-token');
        router.replace('/login');
      }

    } catch (error) {
      console.log(error);
    }
  } else {
    router.push(command);
  }
}

const noticeType = ref('msg')


// 系统通知
const noticeData = ref([
  {
    id: 1,
    readed: true,
    hidden: false,
    type: 'msg',
    name: '郑曦月',
    content: '审批请求已发送，请查收',
    avatar: 'https://img2.baidu.com/it/u=1316245042,2395535024&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    createTime: '今天 12:30:01'
  },
  {
    id: 2,
    readed: false,
    hidden: false,
    type: 'msg',
    name: '郑曦月',
    content: '审批请求已发送，请查收',
    avatar: 'https://img2.baidu.com/it/u=1316245042,2395535024&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    createTime: '今天 12:30:01'
  },
  {
    id: 3,
    readed: false,
    hidden: false,
    type: 'msg',
    name: '郑曦月',
    content: '审批请求已发送，请查收',
    avatar: 'https://img2.baidu.com/it/u=1316245042,2395535024&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    createTime: '今天 12:30:01'
  },
  {
    id: 4,
    readed: false,
    hidden: false,
    type: 'notice',
    name: '龚贤',
    content: '明天放假不用上课',
    avatar: 'https://img2.baidu.com/it/u=1316245042,2395535024&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    createTime: '今天 11:30:01'
  },
  {
    id: 4,
    readed: false,
    hidden: false,
    type: 'todo',
    name: '龚贤',
    content: '明天放假不用上课',
    avatar: 'https://img2.baidu.com/it/u=1316245042,2395535024&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    createTime: '今天 11:30:01'
  }
])

//通知类型数据
const filterNotice = (type: string) => {
  return noticeData.value.filter(subItem => subItem.type === type && !subItem.hidden)
}
//清空消息
const clearNotice = (type: string) => {
  noticeData.value.map(item => {
    if (item.type === type) {
      item.hidden = true
    }
    return item
  })
}
//全部已读
const setAllRead = (type: string) => {
  noticeData.value.map(item => {
    if (item.type === type) {
      item.readed = true
    }
    return item
  })
}

const countUnreaded = computed(() => {
  let sum = 0;
  for (const item of noticeData.value) {
    if (!item.readed && !item.hidden) sum += 1;
  }
  return sum;
})


</script>


<style>
.el-main {
  overflow: visible;
}

/* 1. 菜单展开和伸缩时（迷你菜单）的样式 */
.my-menu {
  border-right: none;
  background-color: transparent;

  .el-sub-menu__title {
    color: rgba(255, 255, 255, 1);

    &:hover {
      color: #fd0000;
      background-color: rgb(254, 223, 225, 1);
    }
  }
}

/* 2. 菜单展开时的样式 */
/* 104行代码的意思 没有收起来时的状态的 */
.my-menu:not(.el-menu--collapse) {
  width: 220px;

  .el-menu-item {
    color: rgb(255, 255, 255);
  }

  .el-menu {
    background-color: transparent;
  }

  .el-sub-menu__title,
  .el-menu-item {

    &:hover,
    &.is-active {
      color: #fd0000;
      background-color: rgb(254, 223, 225, 1);
    }
  }
}

.my-tabs {
  padding: 20px;
  width: 300px;

}

/* 系统通知样式部分 */
.nodata {
  line-height: 100px;
  text-align: center;
}

.notice-list {

  .notice-list-item {

    /* 已读状态 */
    /* & 表示notice-list-item和readed是同级关系，没有&就是父和后代的关系 */
    &.readed {
      opacity: .4;
      user-select: none;
    }

    display: flex;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;

    p {
      margin-left: 12px;
    }
  }
}
</style>

<style scoped>
.el-aside {
  background-color: rgb(254, 223, 225, 0.5);

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    background-color: #f67777;

    span {
      color: rgba(255, 255, 255, .9);
      font-size: 16px;
      margin-left: 6px;
    }
  }
}

.el-header {
  background-color: rgb(254, 223, 225, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  z-index: 999;

  .el-form--inline .el-form-item {
    margin-right: 15px;
    margin-bottom: 0;
  }
}

.backimg {
  background-image: url(../assets/img/IMG_0976.JPG);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.el-menu--horizontal.el-menu {
  border-bottom: none;
}

.right-menu {
  display: flex;

  .el-dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    outline: none;
    margin-left: 10px;

    span {
      margin-left: 8px;
    }
  }
}
</style>